import React,{ Component,useState } from 'react'
import {
    Button,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    InputNumber,
    Collapse,
    message,
    Modal,
    Dropdown,
    Menu,
} from 'antd';
import { runInAction } from 'mobx'

import FormBasePropertyConfig,{ IHLFormUtils } from '../property.config/formBasePropertyConfig';
import { HlLabeledValue } from 'legions-lunar/model';
import get from 'lodash/get'
import set from 'lodash/set'
import has from 'lodash/has'
import { shortHash } from 'legions-lunar/object-hash';
import { QuestionTooltip } from '../questionTooltip/questionTooltip';
import { PropertyQueryFormFields, PropertyQuerySearchFields } from '../../models/form/propertyQueryFormFields';
import TableQueryParamsProperty from '../../containers/components.property/tableQueryParamsProperty';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import {LegionsProConditions} from 'legions-pro-design'
import { mutationObserver } from '../../utils/utils';
import { typeSelectValueData } from '../../stores/projectCommonStore';
import { EditCodeEnum } from './tableListPropertyConfig';
const { Panel } = Collapse;
interface IProps { }
const Question = (lable: string,title: string) => {
    return (<QuestionTooltip label={lable} title={title}></QuestionTooltip>)
}
/** 搜索条件组件属性设置表单配置 */
@fullProvider(QueryConditionsPropertyConfig)
export default class QueryConditionsPropertyConfig {
    @lazyInject(FormBasePropertyConfig)
    public formBasePropertyConfig!: FormBasePropertyConfig
    createQueryConditionsPropertyConfig(Instance?: TableQueryParamsProperty) {
        const span = 7
        const wrapSpan = 17
        const rules = PropertyQueryFormFields.initFormRules<PropertyQueryFormFields,{that:TableQueryParamsProperty}>(PropertyQueryFormFields,{ that: Instance });
        const formUtils = this.formBasePropertyConfig.createFormUtils();
        const TablePropertyApp = Instance.props.store.context.listPagePropertyApp.context.TablePropertyApp;
        const QueryPropertyApp = Instance.props.store.context.listPagePropertyApp.context.QueryPropertyApp;
        const formPropertyApp = Instance.props.store.context.formPropertyApp;
        const projectCommonApp = Instance.props.store.context.projectCommonApp;
        const currComponentView = QueryPropertyApp.queryComponentRef.viewModel.computedQuery.find((item)=>item.containerProps.uuid===QueryPropertyApp.editUid);
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('label',null,''),
            iFormProps: {
                ...formUtils.createLayout('Label名称',span,wrapSpan),
                onChange: (even) => {
                    runInAction(() => {
                       if (!(currComponentView instanceof LegionsProConditions.ConditionSearchModel) && !(currComponentView instanceof LegionsProConditions.ConditionGroupCheckBoxModel)) {
                           QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                               value.conditionsProps['label'] = even as string;
                           })
                        }
                    })
                }
            },
            rules: rules.label,
        })
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('componentName',null,'组件属性名称'),
            iFormProps: {
                ...formUtils.createLayout('组件属性名称',span,wrapSpan),
                onChange: (event) => {
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value.containerProps['name'] = event;
                    })
                }
            },
            rules: rules.componentName,
        })
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('jsonProperty',null,'接口字段名称'),
            iFormProps: {
                ...formUtils.createLayout(Question('接口字段名','后端接口所需要的字段名称,可以跟组件属性名称命名相同'),span,wrapSpan),
                onChange: (event) => {
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value['jsonProperty'] = event;
                    })
                }
            },
            rules: rules.jsonProperty,
        })
        formUtils.renderInputNumberConfig({
            iAntdProps: formUtils.createAntdProps('labelSpan',null,'请输入1-24的数字'),
            iFormProps: {
                ...formUtils.createLayout('label宽度',span,wrapSpan),
                onChange: (event) => {
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                       value.conditionsProps['labelSpan'] = parseInt(event as string,10)
                    })
                }
            },
            rules: rules.labelSpan,
        })
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('maxlength',null,'字符串长度'),
            iFormProps: {
                ...formUtils.createLayout('输入字符长度',span,wrapSpan),
                type: 'number',
                onChange: (even) => {
                    //@ts-ignore
                    const value = parseInt(even as string,10)
                    const nan = NaN
                    let leg = 50
                    if (value > 0 && value !== nan) {
                        leg = value;
                    }
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value.conditionsProps['maxLength'] =leg.toString()
                     })
                }
            },
            rules: rules.maxlength,
        })
        formUtils.renderInputNumberConfig({
            iAntdProps: formUtils.createAntdProps('containermd',null,'请输入3-24的数字'),
            iFormProps: {
                ...formUtils.createLayout(Question('容器宽(md)',' 宽度≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象'),span,wrapSpan),
                max: 24,
                min:3,
                onChange: (even) => {
                    //@ts-ignore
                    const value = parseInt(even as string,10)
                    const nan = NaN
                    let leg = 180
                    if (value > 0 && value !== nan) {
                        leg = value;
                    }
                    
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value.containerProps.col.md = leg;
                     })
                }
            },
            rules: rules.containermd,
        })
        formUtils.renderInputNumberConfig({
            iAntdProps: formUtils.createAntdProps('containerlg',null,'请输入3-24的数字'),
            iFormProps: {
                ...formUtils.createLayout(Question('容器宽(lg)',' 宽度≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象'),span,wrapSpan),
                max: 24,
                min:3,
                onChange: (even) => {
                    //@ts-ignore
                    const value = parseInt(even as string,10)
                    const nan = NaN
                    let leg = 180
                    if (value > 0 && value !== nan) {
                        leg = value;
                    }
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value.containerProps.col.lg = leg;
                     })
                }
            },
            rules: rules.containerlg,
        })
        formUtils.renderInputNumberConfig({
            iAntdProps: formUtils.createAntdProps('containerxl',null,'请输入3-24的数字'),
            iFormProps: {
                ...formUtils.createLayout(Question('容器宽(xl)',' 宽度≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象'),span,wrapSpan),
                max: 24,
                min:3,
                onChange: (even) => {
                    //@ts-ignore
                    const value = parseInt(even as string,10)
                    const nan = NaN
                    let leg = 180
                    if (value > 0 && value !== nan) {
                        leg = value;
                    }
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value.containerProps.col.xl = leg;
                     })
                }
            },
            rules: rules.containerlg,
        })
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('placeholder',null,'占位提示'),
            iFormProps: {
                ...formUtils.createLayout('占位提示',span,wrapSpan),
                onChange: (even) => {
                    QueryPropertyApp.queryComponentRef.methods.setFieldsValues(QueryPropertyApp.editUid,(value) => {
                        value.conditionsProps['placeholder'] = even as string;
                     })
                }
            },
            rules: rules.placeholder,
        })
        this.formBasePropertyConfig.createExecCodeConfig(formUtils,{
            name: 'selectOptionsValue',
            label: '数据项',
            visible:false,
            rules: rules.selectOptionsValue,
            options: [{ key: 'local',value: '数组List',label: '数组List' },{ key: 'remote',value: '配置接口',label: '配置接口' }],
            onSetting: () => {
                runInAction(() => {
                    const value = get(QueryPropertyApp.queryConditionsFormProperyRef.viewModel.InputDataModel,'selectOptionsValue.value') as HlLabeledValue
                    if (!value) {
                        message.warn('请先选择单选组件数据类型');
                        return;
                    }
                    if (value.key === 'remote') { // 选择器远程自动托管
                        projectCommonApp.formSelectValueModalRef.viewModel.visible = true;
                        projectCommonApp.formSelectValueModalRef.viewModel.title = '下拉选项远程搜索配置';
                        projectCommonApp.updateSelectValue('remote',{remote:null,useScope:'proCondition'})
                    }
                    if (value.key === 'local') {  // 数组List
                        const view = currComponentView;
                        const options = get(view,'conditionsProps.options') || []
                        projectCommonApp.formSelectValueModalRef.viewModel.visible = true;
                        projectCommonApp.formSelectValueModalRef.viewModel.title = '数据项信息编辑'
                        const local:typeSelectValueData[] = [];
                        options.map((item,index) => {
                            const uid = `${shortHash(new Date().getTime()) + index}`
                            const componentActiveType = QueryPropertyApp.viewModel.componentActiveType
                            if (componentActiveType === 'select') {
                                local.push({ labelKey: item.key,labelValue: item.value })
                            }
                            if (componentActiveType === 'radioButton') {
                                local.push({ labelKey: item.value,labelValue: item.label })
                            }
                        })
                        projectCommonApp.updateSelectValue('local',{local,useScope:'proCondition'})
                        const timeid = setTimeout(() => {
                            const formFields = {}
                            projectCommonApp.computedSelectVModel.selectValueData.map((item) => {
                                formFields[`labelValue`] = { value: item.labelValue };
                                formFields[`labelKey`] = { value: item.labelKey };
                            })
                            const formAddSelectFormRef = projectCommonApp.projectCommonFormRef.addSelLocalListTableForm.form;
                            /* formAddSelectFormRef.store.updateFormInputData(formAddSelectFormRef.uid,formFields); */
                            formAddSelectFormRef.methods.setTableFormDataSource(projectCommonApp.computedSelectVModel.selectValueData);
                            clearTimeout(timeid)
                        },100)
                    }
                })
            }
        })
        return [
            formUtils.getFormConfig('label'),
            formUtils.getFormConfig('labelSpan'),
            formUtils.getFormConfig('componentName'),
            formUtils.getFormConfig('jsonProperty'),
            formUtils.getFormConfig('containermd'),
            formUtils.getFormConfig('containerlg'),
            formUtils.getFormConfig('containerxl'),
            formUtils.getFormConfig('selectOptionsValueRender'),
            formUtils.getFormConfig('maxlength'),
            formUtils.getFormConfig('placeholder'),
        ]
    }

    createQuerySearchPropertyConfig(Instance?: TableQueryParamsProperty) {
        const span = 7
        const wrapSpan = 17
        const rules = PropertyQuerySearchFields.initFormRules<PropertyQuerySearchFields,{that:TableQueryParamsProperty}>(PropertyQuerySearchFields,{ that: Instance });
        const formUtils = this.formBasePropertyConfig.createFormUtils();
        const QueryPropertyApp = Instance.props.store.context.listPagePropertyApp.context.QueryPropertyApp;
        const projectCommonApp = Instance.props.store.context.projectCommonApp;
        const currComponentView = QueryPropertyApp.queryComponentRef.viewModel.computedQuery.find((item)=>item.containerProps.uuid===QueryPropertyApp.editUid);
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('onQuerySearch',null,'搜索函数'),
            iFormProps: {
                ...formUtils.createLayout('搜索函数',span,wrapSpan),
                disabled: true,
                addonAfter: (<Button size="small" type="primary" onClick={Instance.handleEditCode.bind(Instance,EditCodeEnum.onQuerySearch)}>编辑</Button>),
            },
            rules: rules.onQuerySearch,
        })
        formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('onQueryReset',null,'重置函数'),
            iFormProps: {
                ...formUtils.createLayout('重置函数',span,wrapSpan),
                disabled: true,
                addonAfter: (<Button size="small" type="primary" onClick={Instance.handleEditCode.bind(Instance,EditCodeEnum.onQueryReset)}>编辑</Button>),
            },
            rules: rules.onQueryReset,
        })
        /* formUtils.renderInputConfig({
            iAntdProps: formUtils.createAntdProps('onRefresh',null,'刷新函数'),
            iFormProps: {
                ...formUtils.createLayout('刷新函数',span,wrapSpan),
                disabled: true,
                addonAfter: (<Button size="small" type="primary" >编辑</Button>),
            },
            rules: rules.onRefresh,
        }) */
        return [
            formUtils.getFormConfig('onQuerySearch'),
            formUtils.getFormConfig('onQueryReset'),
            /* formUtils.getFormConfig('onRefresh'), */
        ]
    }
}